import React, { Component } from 'react'
// import React from 'react'
import PropsTypes from 'prop-types'      // 做props里数据的类型检查的，在社区里面需要安装引入一下

export default class TodoHeader extends Component {
    // 类组件的PropTypes用法 静态的static
    static propsTypes = {
        desc: PropsTypes.string,
        a: PropsTypes.string.isRequired,
        b: PropsTypes.string,
        x: PropsTypes.number.isRequired,
        y: PropsTypes.number,
    }
    static defaultProps = {
        desc: '描述'
    }
    render() {
        return (
            <>
                {/* <h1>{this.props.title}</h1> */}
                <h1>{this.props.children}</h1>
                <h3>{this.props.desc}</h3>
                {/* <p>{this.props.a + this.props.b}</p>
                <p>{this.props.x + this.props.y}</p> */}
            </>
        )
    }
}

/*
    函数式组件又叫做无状态组件，
    类组件也可以叫有状态组件，
    组件内部数据全是父组件通过props传递过去的，内部无法修改，叫做受控组件（完全受控和半受控）
    组件内部数据都是自己能修改的是非受控组件
*/

// 函数式组件
// export default function TodoHeader(props) {
//     return (
//         <>
//             {/* <h1>{props.title}</h1> */}
//             <h1>{props.children}</h1>
//             <h3>{props.desc}</h3>
//             {/* <p>{props.a + props.b}</p>
//             <p>{props.x + props.y}</p> */}
//         </>
//     )
// }

// 函数式组件的PropTypes用法
// TodoHeader.propsTypes = {
//     desc: PropsTypes.string,
//     a: PropsTypes.string.isRequired,
//     b: PropsTypes.string,
//     x: PropsTypes.number.isRequired,
//     y: PropsTypes.number,
// }
// TodoHeader.defaultProps = {
//     desc: '描述'
// }






















